{% extends 'base.html' %}
{% load i18n %}
{% load staticfiles %}

{% block title %}机构列表页-慕学在线网{% endblock %}

{% block custom_headerNav %}
  <nav>
    <div class="nav">
      <div class="wp">
        <ul>
          <li><a href="{% url 'index' %}">首页</a></li>
          <li>
            <a href="course-list.html">
              公开课<img class="hot" src="/static/images/nav_hot.png">
            </a>
          </li>
          <li>
            <a href="teachers-list.html">授课教师</a>
          </li>
          <li class="active"><a href="{% url 'org:list' %}">授课机构</a></li>
        </ul>
      </div>
    </div>
  </nav>
{% endblock %}

{% block custom_bread %}
  <section>
    <div class="wp">
      <ul class="crumbs">
        <li><a href="index.html">首页</a>></li>
        <li>课程机构</li>
      </ul>
    </div>
  </section>
{% endblock %}

{% block content %}
  <section>
    <div class="wp butler_list_box list">
      <div class='left'>
        <div class="listoptions">
          <ul>
            <li>
              <h2>机构类别</h2>
              <div class="cont">
                <a href="?city={{ city_id }}"><span
                    class="{% ifequal category '' %}active2{% endifequal %}">全部</span></a>

                <a href="?ct=pxjg&city={{ city_id }}"><span
                    class="{% ifequal category 'pxjg' %}active2{% endifequal %}">培训机构</span></a>

                <a href="?ct=gx&city={{ city_id }}"><span
                    class="{% ifequal category 'gx' %}active2{% endifequal %}">高校</span></a>

                <a href="?ct=gr&city={{ city_id }}"><span
                    class="{% ifequal category 'gr' %}active2{% endifequal %}">个人</span></a>

              </div>
            </li>
            <li>
              <h2>所在地区</h2>
              <div class="more">更多</div>
              <div class="cont">
                <a href="?ct={{ category }}"><span class="{% ifequal city_id '' %}active2{% endifequal %}">全部</span></a>
                {% for city in all_citys|slice:":4" %}  <!-- 取前四个 -->
                  <!-- 由于后端传递过来的 city_id 是字符串，而 city.id 是数字，所以要将 city.id 转换成字符串 -->
                  <a href="?city={{ city.id }}&ct={{ category }}"><span
                      class="{% ifequal city_id city.id|stringformat:'i' %}active2{% endifequal %}">{{ city.name }}</span></a>
                {% endfor %}
              </div>
            </li>
          </ul>
        </div>
        <div class="all">共<span class="key">{{ all_orgs.object_list|length }}</span>家</div>
        <div class="butler_list company list">
          <div class="layout">
            <div class="head">
              <ul class="tab_header">
                <li class="{% if sort == '' %}active{% endif %}"><a href="?ct=&city=">全部</a></li>
                <li class="{% if sort == 'students' %}active{% endif %}"><a
                    href="?sort=students&ct={{ category }}&city={{ city_id }}">学习人数 &#8595;</a></li>
                <li class="{% if sort == 'courses' %}active{% endif %} "><a
                    href="?sort=courses&ct={{ category }}&city={{ city_id }}">课程数 &#8595;</a></li>
              </ul>
            </div>

            {% for org in all_orgs.object_list %}
              <dl class="des difdes">
                <dt>
                  <a href="{% url 'org:home' org.id %}">
                    <img width="200" height="120" class="scrollLoading" data-url="{{ MEDIA_URL }}{{ org.image }}"/>
                  </a>
                </dt>
                <dd>
                  <div class="clearfix">
                    <a href="org-detail-homepage.html">
                      <h1>{{ org.name }}</h1>
                      <div class="pic fl">
                        {% if org.is_auth %}
                          <img src="{% static 'images/authentication.png' %}"/>
                        {% endif %}
                        {% if org.is_gold %}
                          <img src="{% static 'images/gold.png' %}"/>
                        {% endif %}
                      </div>
                    </a>
                  </div>
                  <ul class="cont">
                    <li class="first"><p class="pic9">课程数：<span>{{ org.course_nums }}</span></p>
                      <p class="c7">学习人数：<span>{{ org.students }}</span></p></li>
                    <li class="c8" style="padding-left:18px;">{{ org.address }}</li>
                    <li class="pic10" style="padding-left:18px;">经典课程：
                      <!-- 如果有经典课程内容 -->
                      {% if org.courses %}
                        {% for course in org.courses %}
                          <a href="/diary/19/">{{ course }}</a>
                        {% endfor %}
                      {% else %}
                        暂时没有经典课程！
                      {% endif %}
                    </li>
                  </ul>
                </dd>
                <div class="buy start_groupbuy jsShowPerfect2" data-id="22"><br/>联系<br/>服务</div>
              </dl>
            {% endfor %}
          </div>
          <div class="pageturn">
            <ul class="pagelist">
              {% if all_orgs.has_previous %}
                <li class="long"><a href="?{{ all_orgs.previous_page_number.querystring }}">上一页</a></li>
              {% endif %}
              {% for page in all_orgs.pages %}
                {% if page %}
                  {% ifequal page all_orgs.number %}  {# 如果是当前页 #}
                    <li class="active"><a href="?{{ page.querystring }}">{{ page }}</a></li>
                  {% else %}
                    <li><a href="?{{ page.querystring }}" class="page">{{ page }}</a></li>
                  {% endifequal %}
                {% else %}
                  <li class="none">...</li>
                {% endif %}
              {% endfor %}
              {% if all_orgs.has_next %} {# 如果是当前页 #}
                <li class="long"><a href="?{{ all_orgs.next_page_number.querystring }}">下一页</a></li>
              {% endif %}

              {#              <li class="active"><a href="?page=1">1</a></li>#}
              {#              <li><a href="?page=2" class="page">2</a></li>#}
              {#              <li><a href="?page=3" class="page">3</a></li>#}
              {#              <li class="long"><a href="?page=2">下一页</a></li>#}
            </ul>
          </div>
        </div>
      </div>
      <div class="right companyright">
        <div class="head">我要学习</div>
        <form class="rightform" id="jsStayForm">
          {% csrf_token %}
          <div>
            <img src="/static/images/rightform1.png"/>
            <input type="text" name="name" id="companyName" placeholder="名字" maxlength="25"/>
          </div>
          <div>
            <img src="/static/images/rightform2.png"/>
            <input type="text" name="mobile" id="companyMobile" placeholder="联系电话"/>
          </div>
          <div>
            <img src="/static/images/rightform3.png"/>
            <input type="text" name="course_name" id="companyAddress" placeholder="课程名" maxlength="50"/>
          </div>
          <p class="error company-tips" id="jsCompanyTips"></p>
          <input class="btn" type="text" id="jsStayBtn" value="立即咨询 >"/>
        </form>
      </div>

      <div class="right companyrank layout">
        <div class="head">授课机构排名</div>
        {% for org in hot_orgs %}
          <dl class="des">
            <dt class="num fl">{{ forloop.counter }}</dt> <!-- forloop.counter0 是从零开始排序 -->
            <dd>
              <a href="/company/2/"><h1>{{ org.name }}</h1></a>
              <p>{{ org.address }}</p>
            </dd>
          </dl>
        {% endfor %}
      </div>
    </div>
  </section>
{% endblock %}

{% block custom_js %}
  <script>
    $(function () {
      $(document).ready(function () {
        $('#jsStayBtn').on('click', function () {
          $.ajax({
            cache: false,
            type: "POST",
            url: "{% url 'org:add_ask' %}",
            data: $('#jsStayForm').serialize(),
            async: true,
            success: function (data) {
              if (data.status == 'success') {
                $('#jsStayForm')[0].reset();
                $('#jsCompanyTips').html("");
                alert("提交成功")
              } else if (data.status == 'fail') {
                $('#jsCompanyTips').html(data.msg)
              }
            },
          });
        });
      });
    })

  </script>
{% endblock %}
